<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>停车场管理</title>
	<meta name="decorator" content="default"/>
	<link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
	<link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
	<%--标题--%>
	<div class="top-section">
		<h2>停车场管理</h2>
	</div>

	<div class="body-section white-body">
		<%--功能区--%>
		<form:form id="searchForm" modelAttribute="airParkingLot" action="${ctx}/air/airParkingLot/" method="post" >
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
			<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
			<div class="function-box">
				<div class="left-function">
					<form:input path="name" htmlEscape="false" class="function-ipt" placeholder="输入名称查询" />
					<input id="btnSubmit" class="btn btn-main" type="submit" value="查询"/>
				</div>
				<div class="right-function">
					<shiro:hasPermission name="air:airParkingLot:edit">
					<a href="${ctx}/air/airParkingLot/form" class="btn btn-blue">新增停车场</a>
					</shiro:hasPermission>
				</div>
			</div>
		</form:form>
		<sys:message content="${message}"/>

		<%--表格区--%>
		<div class="table-box">
			<table id="contentTable">
				<thead>
				<tr>
					<th colspan="7" class="td-bb td-rb">基本信息</th>
					<shiro:hasPermission name="air:airParkingLot:edit">
						<th rowspan="2" width="14%">操作</th>
					</shiro:hasPermission>
				</tr>
				<tr>
					<th width="16%">名称</th>
					<th >位置</th>
					<th width="12%">类型</th>
					<th width="8%">停车位</th>
					<th width="8%">摄像头</th>
					<th width="8%">负责人</th>
					<th width="12%" class="td-rb">联系电话</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${page.list}" var="airParkingLot">
					<tr>
						<td>
							<a href="javascript:void(0)" class="details" data-id="${airParkingLot.id}">
									${airParkingLot.name}
							</a>
						</td>
						<td>
								${airParkingLot.position}
						</td>
						<td>
							<%--todo 需要将类型从数字转成对应的名词，1代表“核心区停车场”，2代表“换乘停车场”--%>
								${fns:getDictList('parking_type').get(airParkingLot.parkingType-1)}

						</td>
						<td>
								${airParkingLot.maxParking}
						</td>
						<td>
								${airParkingLot.cameraSum}
						</td>
						<td>
								${airParkingLot.leader}
						</td>
						<td class="td-rb">
								${airParkingLot.phone}
						</td>
						<td class="td-center">
							<shiro:hasPermission name="air:airParkingLot:edit">
							<a href="javascript:void(0)" class="details font-link" data-id="${airParkingLot.id}">详情</a>
							<a href="${ctx}/air/airParkingLot/form?id=${airParkingLot.id}" class="font-link">修改</a>
							<a href="${ctx}/air/airParkingLot/delete?id=${airParkingLot.id}"
							   onclick="return confirmx('确认要删除该停车场吗？', this.href)" class="font-link">删除</a>
							</shiro:hasPermission>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<div class="pagination table-pagination">${page}</div>
		</div>
	</div>

	<%--详情弹窗--%>
	<div id="detailDiv" class="window-layer window-details">
		<div class="window-bg"></div>
		<div class="window-main">
			<div class="window-body">

				<%--主要信息--%>
				<div class="details-div">
					<h3 id="air_rp_name"></h3>
					<div class="info-box">
						<ul class="info-list">
							<li class="info-icon-type" title="停车场类型">
								<span id="air_pl_parking_type"></span>
							</li>
							<li class="info-icon-person" title="停车场负责人">
								<span id="air_pl_leader"></span>&nbsp&nbsp
								<span id="air_pl_phone"></span>
							</li>
							<li class="info-icon-position" title="停车场位置">
								<span id="air_pl_position"></span>
							</li>
						</ul>
						<ul class="info-data">
							<li>
								<span id="air_pl_max_parking"></span>个<br/>停车位
							</li>
						</ul>
					</div>
					<div class="camera-list">
						<div class="camera-box">
							<object id="pointCamera1" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
								<param name='mrl' value='' />
								<param name='volume' value='0' />
								<param name='autoplay' value='true' />
								<param name='loop' value='false' />
								<param name='fullscreen' value='true' />
							</object>
						</div>
						<div class="camera-box">
							<object id="pointCamera2" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
								<param name='mrl' value='' />
								<param name='volume' value='0' />
								<param name='autoplay' value='true' />
								<param name='loop' value='false' />
								<param name='fullscreen' value='true' />
							</object>
						</div>
						<div class="camera-box">
							<object id="pointCamera3" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
								<param name='mrl' value='' />
								<param name='volume' value='0' />
								<param name='autoplay' value='true' />
								<param name='loop' value='false' />
								<param name='fullscreen' value='true' />
							</object>
						</div>
						<div class="camera-box">
							<object id="pointCamera4" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
								<param name='mrl' value='' />
								<param name='volume' value='0' />
								<param name='autoplay' value='true' />
								<param name='loop' value='false' />
								<param name='fullscreen' value='true' />
							</object>
						</div>
					</div>
					<div class="window-bottom">
						<input type="button" class="btn" value="关闭" onclick="CloseDiv()"/>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
        $(document).ready(function () {
            $(".details").click(function () {
                var val = $(this).data("id");
                $.ajax({
                    url: "${ctx}/air/airParkingLot/getById",
                    type: "GET",
                    data: {id: val},
                    success: function (result) {
                        var pl = result.data;
						var plType = "";
						if(pl.parkingType == 1) plType = "核心区停车场";
						if(pl.parkingType == 2) plType = "换乘停车场";
						$("#air_rp_name").html(pl.name);
						$('#air_pl_parking_type').html(plType);
						$('#air_pl_leader').html(pl.leader);
						$('#air_pl_phone').html(pl.phone);
                        $('#air_pl_position').html(pl.position);
                        $('#air_pl_max_parking').html(pl.maxParking);
                        // 启动视频
                        play("pointCamera1",pl.camera1);
                        play("pointCamera2",pl.camera2);
                        play("pointCamera3",pl.camera3);
                        play("pointCamera4",pl.camera4);
//                        play("pointCamera4","rtsp://admin:Thinkjoy2015@192.168.0.242:554/h264/ch1/main/av_stream");
                    }
                });
                $("#detailDiv").css("display", "block");
            });
        });

        function CloseDiv() {
            $("#detailDiv").css("display", "none");
			//结束所有监控视频
			stop("pointCamera1");
			stop("pointCamera2");
			stop("pointCamera3");
			stop("pointCamera4");
        }

		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
			return false;
		}

		//播放视频
		function play(id,href){
			var vlc = document.getElementById(id);
			vlc.playlist.clear();
			vlc.playlist.add(href);
			vlc.playlist.play();
		}

		//停止播放
		function stop(id){
			var vlc = document.getElementById(id);
			vlc.playlist.stop();
		}
	</script>
</body>
</html>